<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">活动中心</view>
			<view class="action-btn">
				<text class="action-icon">⋮</text>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<swiper 
			class="banner-swiper" 
			circular 
			autoplay 
			:interval="3000" 
			:duration="500"
			indicator-dots
			indicator-color="rgba(255, 255, 255, 0.6)"
			indicator-active-color="#1a73e8"
		>
			<swiper-item v-for="(banner, index) in banners" :key="index" class="banner-item">
				<image :src="banner.image" mode="aspectFill" class="banner-image"></image>
				<view class="banner-info">
					<text class="banner-title">{{ banner.title }}</text>
					<text class="banner-desc">{{ banner.desc }}</text>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 活动分类 -->
		<view class="category-section">
			<view 
				v-for="(category, index) in categories" 
				:key="index"
				class="category-item"
				:class="{ 'active': currentCategory === category.id }"
				@tap="selectCategory(category.id)"
			>
				<text class="category-icon">{{ category.icon }}</text>
				<text class="category-name">{{ category.name }}</text>
			</view>
		</view>
		
		<!-- 活动列表 -->
		<view class="activity-list">
			<view 
				v-for="activity in filteredActivities" 
				:key="activity.id"
				class="activity-card"
				@tap="goToDetail(activity.id)"
			>
				<image class="activity-image" :src="activity.image" mode="aspectFill"></image>
				<view class="activity-info">
					<view class="title-row">
						<text class="activity-title">{{ activity.title }}</text>
						<view class="activity-tag" :style="{ backgroundColor: getTagColor(activity.type) }">
							{{ activity.type }}
						</view>
					</view>
					<text class="activity-desc">{{ activity.description }}</text>
					<view class="activity-meta">
						<text class="activity-time">{{ activity.time }}</text>
						<text class="activity-status" :class="getStatusClass(activity)">{{ getStatusText(activity) }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-if="filteredActivities.length === 0">
			<image class="empty-image" src="/static/images/activity/empty.png" mode="aspectFit"></image>
			<text class="empty-text">当前分类暂无活动</text>
			<button class="refresh-btn" @tap="loadActivities">刷新</button>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-container" v-if="isLoading">
			<view class="spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				isLoading: true,
				currentCategory: 'all',
				banners: [
					{
						image: '/static/images/activity/banner1.jpg',
						title: '夏日狂欢节',
						desc: '清凉一夏，赢取限定奖励'
					},
					{
						image: '/static/images/activity/banner2.jpg',
						title: '游戏周年庆',
						desc: '登录领好礼，每天抽大奖'
					},
					{
						image: '/static/images/activity/banner3.jpg',
						title: '新版本预告',
						desc: '全新玩法即将上线'
					}
				],
				categories: [
					{ id: 'all', name: '全部', icon: '🔍' },
					{ id: 'ongoing', name: '进行中', icon: '��' },
					{ id: 'upcoming', name: '即将开始', icon: '⏰' },
					{ id: 'ended', name: '已结束', icon: '📦' }
				],
				activities: [
					{
						id: 101,
						title: '记忆翻牌大赛',
						description: '测试你的记忆力，挑战最快完成时间',
						image: '/static/images/activity/memory.jpg',
						type: '竞赛',
						time: '2025.5.1-2025.5.15',
						status: 'ongoing'
					},
					{
						id: 102,
						title: '双倍经验周',
						description: '所有游戏经验翻倍，冲级好时机',
						image: '/static/images/activity/exp.jpg',
						type: '限时',
						time: '2025.5.5-2025.5.12',
						status: 'ongoing'
					},
					{
						id: 103,
						title: '塔防守卫者',
						description: '新游戏"元素守护者"抢先体验',
						image: '/static/images/activity/tower.jpg',
						type: '新游',
						time: '2025.5.10起',
						status: 'upcoming'
					},
					{
						id: 104,
						title: '五一劳动节活动',
						description: '劳动节特别活动，赢取专属头像框',
						image: '/static/images/activity/labor.jpg',
						type: '节日',
						time: '2025.5.1-2025.5.7',
						status: 'ended'
					},
					{
						id: 105,
						title: '饼干制作大师',
						description: '比拼饼干产量，争夺饼干之王称号',
						image: '/static/images/activity/cookie.jpg',
						type: '竞赛',
						time: '2025.5.8-2025.5.22',
						status: 'upcoming'
					}
				]
			};
		},
		computed: {
			filteredActivities() {
				if (this.currentCategory === 'all') {
					return this.activities;
				}
				return this.activities.filter(activity => activity.status === this.currentCategory);
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.loadActivities();
		},
		methods: {
			// 加载活动数据
			loadActivities() {
				this.isLoading = true;
				
				// 模拟网络请求
				setTimeout(() => {
					// 实际项目中应从API获取数据
					this.isLoading = false;
				}, 800);
			},
			
			// 选择分类
			selectCategory(categoryId) {
				this.currentCategory = categoryId;
			},
			
			// 前往活动详情
			goToDetail(activityId) {
				uni.navigateTo({
					url: `/pages/activities/detail?id=${activityId}`
				});
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 获取标签颜色
			getTagColor(type) {
				const colorMap = {
					'竞赛': '#ff9800',
					'限时': '#4caf50',
					'新游': '#9c27b0',
					'节日': '#e91e63'
				};
				
				return colorMap[type] || '#1a73e8';
			},
			
			// 获取活动状态文本
			getStatusText(activity) {
				const statusMap = {
					'ongoing': '进行中',
					'upcoming': '即将开始',
					'ended': '已结束'
				};
				
				return statusMap[activity.status] || '未知状态';
			},
			
			// 获取状态样式类
			getStatusClass(activity) {
				return `status-${activity.status}`;
			}
		}
	};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1a73e8;
	height: 88rpx;
	padding: 0 30rpx;
}

.back-btn, .action-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon, .action-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

/* 轮播图 */
.banner-swiper {
	height: 320rpx;
}

.banner-item {
	position: relative;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.banner-title {
	font-size: 34rpx;
	color: #ffffff;
	font-weight: 600;
	display: block;
	margin-bottom: 10rpx;
}

.banner-desc {
	font-size: 26rpx;
	color: rgba(255,255,255,0.9);
}

/* 分类 */
.category-section {
	display: flex;
	padding: 20rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.category-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx 0;
	position: relative;
}

.category-icon {
	font-size: 36rpx;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 26rpx;
	color: #666;
}

.category-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #1a73e8;
	border-radius: 2rpx;
}

.category-item.active .category-name {
	color: #1a73e8;
	font-weight: 500;
}

/* 活动列表 */
.activity-list {
	padding: 0 20rpx;
}

.activity-card {
	display: flex;
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.activity-image {
	width: 200rpx;
	height: 200rpx;
	flex-shrink: 0;
}

.activity-info {
	flex: 1;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.activity-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	flex: 1;
}

.activity-tag {
	font-size: 20rpx;
	color: #ffffff;
	padding: 4rpx 12rpx;
	border-radius: 10rpx;
	margin-left: 16rpx;
}

.activity-desc {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 20rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.activity-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.activity-time {
	font-size: 24rpx;
	color: #999;
}

.activity-status {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
}

.status-ongoing {
	background-color: rgba(76, 175, 80, 0.1);
	color: #4caf50;
}

.status-upcoming {
	background-color: rgba(33, 150, 243, 0.1);
	color: #2196f3;
}

.status-ended {
	background-color: rgba(158, 158, 158, 0.1);
	color: #9e9e9e;
}

/* 空状态 */
.empty-state {
	padding: 100rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.refresh-btn {
	background-color: #1a73e8;
	color: #ffffff;
	font-size: 28rpx;
	padding: 15rpx 40rpx;
	border-radius: 40rpx;
}

/* 加载状态 */
.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.spinner {
	width: 80rpx;
	height: 80rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #1a73e8;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 30rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 